---
{
	"title": "Exemple de plugiciel, Bonjour le monde",
	"language": "fr",
	"category": "Autre",
	"description": "Un tutoriel rapide sur comment créer votre plugiciel BOEW.",
	"tag": "helloworld",
	"parentdir": "helloworld",
	"altLangPrefix": "helloworld",
	"js": ["demo/bonjour"],
	"dateModified": "2016-12-06"
}
---

<p>Un tutoriel rapide sur comment créer votre plugiciel BOEW.</p>

<div class="wb-prettify all-pre linenums"></div>

<h2>Étape 1 - Utiliser un plugiciel conteneur squelettique.</h2>

<p>Voici un plugiciel conteneur squelettique:</p>

<pre><code>/**
 * @title WET-BOEW Plugiciel conteneur squelettique
 * @overview Plugiciel démontrant un example de comment créer votre propre plugiciel BOEW personnalisé
 * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 * @author @duboisp
 */
( function( $, window, wb ) {
&quot;use strict&quot;;

/*
 * Définition de variable et de fonction.
 * Ceux-ci sont généraux au plugiciel - cela veux dire qu'ils seront initialisé une fois par page,
 * et non à chaque fois que le plugiciel sera instancié sur la page. Donc, ici c'est un bon endroit
 * enfin de définir des variables qui sont communes à toutes les instance du plugiciel sur la page.
 */
<strong>var nomComposant = &quot;wb-squelette&quot;,</strong>
	selecteur = &quot;.&quot; + nomComposant,
	initEvenement = &quot;wb-init&quot; + selecteur,
	$document = wb.doc,

	/**
	 * @method init
	 * @param {jQuery Evenement} Evenement L'object événement lors du déclenchement de la fonction
	 */
	init = function( Evenement ) {

		// Début de l'initialisation
		// retourne un objet DOM = procéder avec l'initialisation
		// retourne undefined = ne pas procéder avec l'initialisation (ex., il est déjà initialisé)
		var elm = wb.init( Evenement, nomComposant, selecteur ),
			$elm;

		if ( elm ) {
			$elm = $( elm );

			<strong>// ... Faire l'initialisation du plugiciel</strong>

			// Annonce que l'initialisation de l'instance a été complété
			wb.ready( $elm, nomComposant );
		}
	};

<strong>// Ajouter votre code pour gérer les événement de votre plugiciel</strong>
$document.on( &quot;nom.de.votre.evenement&quot;, selecteur, function() {
	<strong>//... votre code ici ...</strong>
} );

// Liaison à l'événement init du plugiciel
$document.on( &quot;timerpoke.wb &quot; + initEvenement, selecteur, init );

// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );

} )( jQuery, window, wb );</code></pre>

<dl>
	<dt>À la ligne 16 <code>var nomComposant = &quot;wb-squelette&quot;,</code></dt>
	<dd>La valeur donnée à <var>nomComposant</var> représentera le nom du plugiciel et du nom de la classe à utiliser pour initié l'instance.</dd>

	<dt>À la ligne 36 <code>// ... Faire l'initialisation du plugiciel</code></dt>
	<dd>C'est ici où que toute les actions d'initialisation nécessaire seront exécuté. Le défi est de faire le moins d'exécution que possible afin de rendre votre plugiel en attente d'action de l'utilisateur. Les plugiciels de la BOEW sont orienté sur une approche événementielle où qu'on essai de ne pas exécuter des lignes de script qui n'est actuellement pas nécessaire. Ceci pour des raison de performance.</dd>

	<dt>À la ligne 43-45 <code>// Ajouter votre code pour gérer les événement de votre plugiciel</code></dt>
	<dd>C'est ici que vous allez déclarer une série d'événement pour votre plugiciel. Vous pouvez déclencher vos propre événement en utilisant l'instance jQuery d'un élément. L'appel à la fonction trigger suivi de votre nom d'événement et de vos donnée s'il y lieu. Par example: <code>$elm.trigger( "nom.de.votre.evenement", mesdonnee );</code>. Le paramètre mesdonnee est optionnel.</dd>
</dl>

<h2>Étape 2 - Ajouter votre code javascript</h2>

<p>Cet example de plugiciel ajoute le texte "Bonjour le monde" à tout éléments qui contient la classe <code>wb-bonjour</code> pour la page duquel le plugiciel est chargé.</p>

<pre><code>/**
 * @title WET-BOEW Plugiciel bonjour le monde
 * @overview Plugiciel démontrant un example de comment créer votre propre plugiciel BOEW personnalisé
 * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 * @author @duboisp
 */
( function( $, window, wb ) {
&quot;use strict&quot;;

/*
 * Définition de variable et de fonction.
 * Ceux-ci sont généraux au plugiciel - cela veux dire qu'ils seront initialisé une fois par page,
 * et non à chaque fois que le plugiciel sera instancié sur la page. Donc, ici c'est un bon endroit
 * enfin de définir des variables qui sont communes à toutes les instance du plugiciel sur la page.
 */
<strong>var nomComposant = &quot;wb-bonjour&quot;,</strong>
	selecteur = &quot;.&quot; + nomComposant,
	initEvenement = &quot;wb-init&quot; + selecteur,
	$document = wb.doc,

	/**
	 * @method init
	 * @param {jQuery Evenement} Evenement L'object événement lors du déclenchement de la fonction
	 */
	init = function( Evenement ) {

		// Début de l'initialisation
		// retourne un objet DOM = procéder avec l'initialisation
		// retourne undefined = ne pas procéder avec l'initialisation (ex., il est déjà initialisé)
		var elm = wb.init( Evenement, nomComposant, selecteur ),
			$elm;

		if ( elm ) {
			$elm = $( elm );

			// ... Faire l'initialisation du plugiciel

			// Appel d'un événement personnalisé
			<strong>$elm.trigger( &quot;nom.de.votre.evenement&quot; );</strong>

			// Annonce que l'initialisation de l'instance a été complété
			wb.ready( $elm, nomComposant );
		}
	};

// Ajouter votre code pour gérer les événement de votre plugiciel
$document.on( &quot;nom.de.votre.evenement&quot;, selecteur, function( evenement ) {
	var elm = evenement.currentTarget,
		$elm = $( elm );

	<strong>$elm.append( &quot;Bonjour le monde&quot; );</strong>

} );

// Liaison à l'événement init du plugiciel
$document.on( &quot;timerpoke.wb &quot; + initEvenement, selecteur, init );

// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );

} )( jQuery, window, wb );</code></pre>

<dl>
	<dt>À la ligne 16 <code>var nomComposant = &quot;wb-bonjour&quot;,</code></dt>
	<dd>Le plugiciel est nommé <strong>wb-bonjour</strong>.</dd>

	<dt>À la ligne 39 <code>$elm.trigger( &quot;nom.de.votre.evenement&quot; );</code></dt>
	<dd>L'événement &quot;nom.de.votre.evenement&quot; est déclenché pour l'élément DOM qui a initialisé cet instance de plugiciel</dd>

	<dt>À la ligne 51 <code>$elm.append(&quot;Bonjour le monde&quot;);</code></dt>
	<dd>Le texte &quot;Bonjour le monde&quot; est ajouté à la fin du contenu intérieur de l'élément.</dd>
</dl>

<h2>Étape 3 - Permettre le paramétrage</h2>

<p>La plupart des plugiciels ont besoin de paramétrage, l'exemple de code suivant démontre comment supporté plusieurs avenue différente afin de géré des paramétrages définie par l'éditeur et le développeur.</p>

<pre><code>/**
 * @title WET-BOEW Plugiciel bonjour le monde
 * @overview Plugiciel démontrant un example de comment créer votre propre plugiciel BOEW personnalisé
 * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 * @author @duboisp
 */
( function( $, window, wb ) {
&quot;use strict&quot;;

/*
 * Définition de variable et de fonction.
 * Ceux-ci sont généraux au plugiciel - cela veux dire qu'ils seront initialisé une fois par page,
 * et non à chaque fois que le plugiciel sera instancié sur la page. Donc, ici c'est un bon endroit
 * enfin de définir des variables qui sont communes à toutes les instance du plugiciel sur la page.
 */
var nomComposant = &quot;wb-bonjour&quot;,
	selecteur = &quot;.&quot; + nomComposant,
	initEvenement = &quot;wb-init&quot; + selecteur,
	$document = wb.doc,
	<strong>defauts = {},</strong>

	/**
	 * @method init
	 * @param {jQuery Evenement} Evenement L'object événement lors du déclenchement de la fonction
	 */
	init = function( Evenement ) {

		// Début de l'initialisation
		// retourne un objet DOM = procéder avec l'initialisation
		// retourne undefined = ne pas procéder avec l'initialisation (ex., il est déjà initialisé)
		var elm = wb.init( Evenement, nomComposant, selecteur ),
			$elm,
			<strong>parametres;</strong>

		if ( elm ) {
			$elm = $( elm );

			// ... Faire l'initialisation du plugiciel

			// Obtenir les paramètres JSON du plugiciel tel que définie par l'attribut data-wb-bonjour
			<strong>parametres = $.extend(
				true,
				{},
				defauts,
				window[ nomComposant ],
				wb.getData( $elm, nomComposant )
			);</strong>

			// Appel d'un événement personnalisé
			<strong>$elm.trigger( &quot;nom.de.votre.evenement&quot;, parametres );</strong>

			// Annonce que l'initialisation de l'instance a été complété
			wb.ready( $elm, nomComposant );
		}
	};

// Ajouter votre code pour gérer les événement de votre plugiciel
$document.on( &quot;nom.de.votre.evenement&quot;, selecteur, <strong>function( evenement, donnee ) {</strong>
	var elm = evenement.currentTarget,
		$elm = $( elm );

	$elm.append( &quot;Bonjour le monde&quot; );

	<strong>if ( donnee &amp;&amp; donnee.surpassetoi ) {</strong>
		$elm.prepend( &quot;Surpasse toi&quot; );
	}
} );

// Liaison à l'événement init du plugiciel
$document.on( &quot;timerpoke.wb &quot; + initEvenement, selecteur, init );

// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );

} )( jQuery, window, wb );</code></pre>

<dl>
	<dt>À la ligne 20 <code>defauts = {}</code></dt>
	<dd>Un objet JSON qui définie les paramètres par défaut du plugiciel.</dd>

	<dt>À la ligne 33 <code>parametres;</code></dt>
	<dd>Une variable local qui contiendra les paramètres de l'instance courante du plugiciel.</dd>

	<dt>À la ligne 41 <code>parametres = $.extend(</code></dt>
	<dd>La valeur de la variable local, parametres, sera une copie clonné créé en combinant l'ensemble des paramètres.</dd>

	<dt>À la ligne 42 <code>true,</code></dt>
	<dd>Cela va faire une copie en profondeur des objects JSON.</dd>

	<dt>À la ligne 43 <code>{},</code></dt>
	<dd>L'extension débute avec un objet vide.</dd>

	<dt>À la ligne 44 <code>defauts,</code></dt>
	<dd>Applique les paramètres par défaut.</dd>

	<dt>À la ligne 45 <code>window[ nomComposant ],</code></dt>
	<dd>Obtient les paramètres définie via javascript qui est souvent directement codé dans la même page qui utilise le plugiciel. Par example : <code>window['wb-bonjour'] = {};</code></dd>

	<dt>À la ligne 46 <code>wb.getData( $elm, nomComposant )</code></dt>
	<dd>Cela va lire les paramètres définie par l'attribut <code>data-wb-bonjour</code> et transforme le résultat en un objet JSON.</dd>

	<dt>À la ligne 50 <code>$elm.trigger( &quot;nom.de.votre.evenement&quot;, parametres );</code></dt>
	<dd>Ici, le second paramètre est la configuration de l'instance en cours et qui sera utilisé par l'événement.</dd>

	<dt>À la ligne 58 <code>function( evenement, donnee ) {</code></dt>
	<dd>Ajoute un second paramètre, <var>donnee</var>, à la fonction afin d'être en mesure de recevoir les données lorsque l'événement est déclenché.</dd>

	<dt>À la ligne 64-66 <code>if ( donnee &amp;&amp; donnee.surpassetoi ) {</code></dt>
	<dd>S'il la variable <var>donnee</var> a été initialisé et qu'il contient une propriété nommé <var>surpassetoi</var> avec n'importe lequel valeur qui est vrai, alors les mots &quot;Surpasse toi&quot; sera ajouté au début de l'élément.</dd>
</dl>

<h2>Étape 4 - Mise à l'essaie</h2>

<p class="wb-bonjour">Exemple 1</p>

<p>Exemple 2 (<span class="wb-bonjour">à l'intérieur d'un span</span>)</p>

<p class="wb-bonjour" data-wb-bonjour='{ "surpassetoi": true }'>Exemple 3 avec paramètre</p>

<pre><code>&lt;p class=&quot;wb-bonjour&quot;&gt;Exemple 1&lt;/p&gt;

&lt;p&gt;Exemple 2 (&lt;span class=&quot;wb-bonjour&quot;&gt;à l'intérieur d'un span&lt;/span&gt;)&lt;/p&gt;

&lt;p class=&quot;wb-bonjour&quot; data-wb-bonjour='{ &quot;surpassetoi&quot;: true }'&gt;Exemple 3 avec paramètre&lt;/p&gt;</code></pre>

<p>Noter que pour que vous puissiez utiliser votre propre plugiciel dans la BOEW, vous devriez ajouter votre script après celui de la BOEW (wet-boew.js) dans le code HTML.</p>

<h2>Allez plus loin</h2>

<p>Le coeur non documenté de la BOEW contient plusieurs fonction utilitaire trè utile à plusieurs.</p>

<p>Tel que la fonction <code>wb.getId()</code> permet d'obtenir un identifiant unique qui n'entrera pas en conflit avec les autres éléments sur la page. Ou le tableau disponible par <code>wb.drawColours</code> définie une séquence de couleur à utiliser afin de maintenir un bon contraste, tel qu'utilisé par les graphiques et le géomap. Explorer le <a href="https://github.com/wet-boew/wet-boew/tree/master/src/core" hreflang="en">code source du coeur de la BOEW</a> afin de découvrir plusieurs autres fonction utilitaire.</p>

<p>Le chargement de plugiciel tierce se fait à l'aide de Modernizer. Vous pouvez explorer des plugiciels qui l'utilise tel que l'<a href="https://github.com/wet-boew/wet-boew/blob/master/src/plugins/tables/tables.js#L80" hreflang="en">amélioration de tableau de donnée</a>.</p>

<h2>Question ou besoin d'assistance?</h2>

<p><a href="https://github.com/wet-boew/wet-boew/issues/new" hreflang="en">Soumettre une requête sur Github</a> (en anglais seulement, mais les questions peuvent être posés en français)</p>
